<!--督导组长查看-->
<template>
  <div class="wrapper-container">
    <div class="table-container">
      <el-table
        tooltip-effect="light"
        :data="tableData"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
      >
        <el-table-column
          prop=""
          label="操作"
          width="132"
          align="center"
          class-name=""
          label-class-name=""
        >
          <template slot-scope="scope">
            <div class="wrapper-button">
              <!--              <div class="edit-button" v-if="scope.$index === 1">-->
              <!--                <img-->
              <!--                  src="../../../assets/assessment/icon-plan-record-detail.png"-->
              <!--                  alt=""-->
              <!--                />-->
              <!--                <span-->
              <!--                  @click="-->
              <!--                    $router.push('/teacher/appraisal/addSupervisionInformation')-->
              <!--                  "-->
              <!--                  >修改</span-->
              <!--                >-->
              <!--              </div>-->
              <div class="search-button">
                <img src="../../../assets/assessment/icon-search.png" alt=""/>
                <span>查看</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="schooltimeday" label="日期" width="132" align="center">
        </el-table-column>
        <el-table-column prop="schooltimeweek" label="星期" width="79" align="center">
        </el-table-column>
        <el-table-column
          prop="listenclass"
          label="听课节次"
          width="124"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="classesname"
          label="课程名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="employee" label="教员" width="93" align="center">
        </el-table-column>
        <el-table-column prop="classes" label="教学班" width="108" align="center">
        </el-table-column>
        <el-table-column prop="jiaoyanshi" label="上课地点" width="97" align="center">
        </el-table-column>
        <el-table-column
          prop="employeedep"
          label="授课教员单位"
          width="139"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="evaluatescores"
          label="评价分数"
          width="115"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="orderofevaluation"
          label="评价等级"
          width="117"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="supervisorid" label="督导专家" align="center">
        </el-table-column>
        <el-table-column
          prop="expertcomments"
          label="评语"
          width="198"
          header-align="center"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.expertcomments.length > 36">
              <span
                v-if="currentCell === scope.$index"
                @mouseleave="cellLeave()"
              >{{ scope.row.expertcomments }}</span
              >
              <span v-else
              ><span
                @mouseover="cellMouseEnter(scope.$index)"
                @mouseleave="cellLeave()"
              >{{ dealCommonn(scope.row.expertcomments) }}</span
              ></span
              >
            </template>
            <template v-else>
              <span>{{ scope.row.expertcomments }}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import {supervisionteam} from "@/api/teacher/supervision";

export default {

  data() {
    return {
      props: ["supquery"],
      currentCell: "",
      tableData: [
        {
          schooltimeday: "2021-02-16",
          schooltimeweek: "星期一",
          listenclass: "1，2，3",
          classesname: "高级数学",
          employee: "高教员*",
          classes: "教学一班",
          jiaoyanshi: "教室三",
          employeedep: "单位三",
          evaluatescores: "98",
          orderofevaluation: "A",
          supervisorid: "如果内容很多的情况下，放不开的内容像Excel表一样隐藏起来，鼠标点击显示鼠标点击显示鼠标点击显示鼠标点击显示鼠标点击显示鼠标点击显示鼠标点击显示",
          statistics: "已提交",
        },
      ],
    };
  },
  mounted() {
    this.supteam(this.supquery);
  },

  watch: {
    supquery: {
      deep: true,
      handler(nv, ov) {
        this.tableData = nv
      }
    }
  },
  methods: {
    supteam(obj) {
      return new Promise(() => {
        //教员查询到所有数据
        supervisionteam(obj).then(res => {
          this.tableData = res.data.data;
          console.log(this.tableData,'this.tableData')
          console.log(res, 'res')
        })
      })
    },

    dealCommonn(item) {
      return item.substring(0, 36) + "...";
    },
    cellMouseEnter(index) {
      this.currentCell = index;
    },
    cellLeave() {
      this.currentCell = "";
    },
  },
};
</script>
<style lang="less" scoped>
.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }

  .search-button {
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 27px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;

    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }

    > img {
      width: 19px;
      height: 19px;
      margin-right: 4px;
    }
  }

  .edit-button {
    .search-button;
    background: #dfffef;
    border: 1px solid #02c86c;

    > span {
      color: #02c86c;
    }
  }
}
</style>
